<template>
    <div class="mainBox">
        <div class="title">
            <span class="el-icon-s-data"></span>
            <span>聚惠星后台管理数据展示</span>
        </div>
        <div class="whiteBox">
            <div class="left" v-for="(item,index) in numList" :key="index">
                <div class="left touImg" @mouseover='change(index)' @mouseleave='changes(index)' :class="[item.active?'bg'+index:'']">
                    <img :src="item.active?item.icon1:item.icon" alt="">
                    </div>
                <div class="right">
                    <div class="customer">{{item.name}}</div>
                    <div class="custNum">{{item.num}}</div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div id="main1"></div>
        <div id="main2" class="left"></div>
        <div id="main3" class="right"></div>
        <div class="clear"></div>
    </div>
</template>
<script>
import {echatList} from '@/api/home';
export default {
    name:'homePage',
    data(){
        return{
            numList:[
                {   
                    icon:require('../../assets/customer.png'),
                    icon1:require('../../assets/customer1.png'),
                    name:'用户数量',
                    num:'4,119',
                    active:false,
                    color:'#40C9C6'
                },
                {   
                    icon:require('../../assets/goods.png'),
                    icon1:require('../../assets/goods1.png'),
                    name:'商品数量',
                    num:'246',
                    active:false,
                    color:'#36A3F7'
                },
                {   
                    icon:require('../../assets/goods2.png'),
                    icon1:require('../../assets/goods1.png'),
                    name:'货物数量',
                    num:'5,146',
                    active:false,
                    color:'#F4516C'
                },
                {   
                    icon:require('../../assets/money.png'),
                    icon1:require('../../assets/money1.png'),
                    name:'订单数量',
                    num:'1,122',
                    active:false,
                    color:'#34BFA3'
                },
            ],
            categorySell:{},
            orderAmts:{},
            userOrderCnt:{},
        }
    },
    mounted(){
        let _self = this;
        echatList().then(res=>{
            if(res.errno == 0){
                let {categorySell,orderAmts,userOrderCnt} = res.data;
                _self.echatFn1(userOrderCnt)
                _self.echatFn2(orderAmts)
                _self.echatFn3(categorySell)
            }else if(res.errno==501){
                this.$confirm('请重新登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/')
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消'
                    });          
                });
            }
        })
    },
    methods:{
        echatFn1(obj){
            let _self = this;
            var chartDom = document.getElementById('main1');
            var myChart = _self.$echarts.init(chartDom);
            var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['用户数', '订单数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:obj.dayData,
                        axisLabel:{
                            interval:0,
                            rotate:40,
                        },
                        axisLine:{
		                    lineStyle:{
		                        color:'#0087ED',
		                        width:1,
		                    }
                        }
                    },
                    
                    yAxis: {
                        type: 'value',
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#0087ED',
                                width:1,  
                            }
                        }
                    },
                    series: [
                        {
                        name: '用户数',
                        type: 'line',
                        smooth: true,
                        data: obj.userCnt
                        },
                        {
                        name: '订单数',
                        type: 'line',
                        smooth: true,
                        data: obj.orderCnt
                        }
                    ]
            }
            option && myChart.setOption(option);
            window.addEventListener("resize", function(){
                myChart.resize();
            });

        },
        echatFn2(obj){
            let _self = this;
            var chartDom = document.getElementById('main2');
            var myChart = _self.$echarts.init(chartDom);
            var option = {
                 tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: obj.dayData,
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#0087ED',
                                    width:1,
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            min: 0,
                            max: 50,
                            interval: 10,
                            axisLabel: {
                                formatter: '元'
                            },
                            axisLine:{
                                show:true,
                                lineStyle:{
                                    color:'#0087ED',
                                    width:1,  
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 1,
                            interval: 0.2,
                            axisLabel: {
                                formatter: '笔'
                            },
                            axisLine:{
                                show:true,
                                lineStyle:{
                                    color:'#0087ED',
                                    width:1,  
                                }
                            }
                        }
                    ],
                    series: [
                        {
                        type: 'bar',
                        data:obj.orderAmtData
                        },
                        {
                        name: 'Temperature',
                        type: 'line',
                        yAxisIndex: 1,
                        data:obj.orderCntData
                        }
                    ]
            }
            option && myChart.setOption(option);
            window.addEventListener("resize", function(){
                myChart.resize();
            });
        },
        echatFn3(obj){
            let _self = this;
            var chartDom = document.getElementById('main3');
            var myChart = _self.$echarts.init(chartDom);
            var option = {
                tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        bottom: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                        name: '销售额',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        emphasis: {
                            label: {
                            show: true,
                            fontSize: '10',
                            fontWeight: 'bold'
                            }
                        }, 
                        tooltip:{
                            textStyle:{
                                color:'#FFF',
                                
                            },
                            backgroundColor:'rgba(0,0,0,0.4)',
                            formatter: function(param) { 
                                return '<div style=" "> '+ param.seriesName+ "<br>"+ param.name +' : '  + param.value +' ('+  param.percent+'%)'+ "<br>"
                                '</div>';               
                            }
                        },           
                        labelLine: {
                            normal:{
                                show: true,
                                length: 15,
                                length2: 0,
                                maxSurfaceAngle: 80
                            },
                            
                        },
                        data:obj.categorySellData
                        }
                ] 
            }
            option && myChart.setOption(option);
            window.addEventListener("resize", function(){
                myChart.resize();
            });
        },
        change(index){
            let _self = this;
            _self.numList[index].active = true
        },
        changes(index){
            let _self = this;
            _self.numList[index].active = false
        },
    }
}
</script>
<style scoped>
.left{
    float: left;
}
.right{
    float: right;
}
.clear{
    clear: both;
}
.mainBox{
    /* background-color: rgba(0,75,142,0.5); */
    background: #fff;
    padding: 40px 30px;
    position: relative;
}
.whiteBox{
    width: 100%;
}
.title{
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 26px;
    font-weight: bold;
    color: #34BFA3;
}
@media all and (min-width :1000px){
    .whiteBox>.left{
        width: 22%;
        margin-right: 4%;
        height: 100px;
        box-sizing: border-box;
        padding: 10px;
        box-shadow: 0px 0px 10px 3px rgb(167, 167, 167,0.8);
        background-color: rgba(242,246,252);
        border-radius: 10px;
    }
    .whiteBox>.left:nth-child(4){
        margin-right: 0;
    }
}
@media all and (max-width :999px){
    .whiteBox>.left{
        width: 48%;
        margin-right: 4%;
        height: 100px;
        box-sizing: border-box;
        padding: 10px;
        margin-top: 4%;
        box-shadow: 0px 0px 10px 3px rgb(167, 167, 167,0.8);
        background-color: rgba(242,246,252);
        border-radius: 10px;
    }
    .whiteBox>.left:nth-child(1),
    .whiteBox>.left:nth-child(2){
        margin-top: 0;
    }
    .whiteBox>.left:nth-child(2n+2){
        margin-right: 0;
    }
}

.whiteBox>.left>.left,
.whiteBox>.left>.right{
    width: calc(50% - 10px);
    height: 100%;
}
.touImg{
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
}
.whiteBox img{
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.customer{
    line-height: 40px;
}
.custNum{
    line-height: 30px;
    font-weight: bold;
}
.bg0{
    background-color: #40C9C6;
}
.bg1{
    background-color: #36A3F7;
}
.bg2{
    background-color: #F4516C;
}
.bg3{
    background-color: #34BFA3;
}
#main1{
    width: 100%;
    height: 400px;
    margin: 40px 0;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    /* box-shadow: 0px 0px 10px 3px rgb(167, 167, 167); */
    background-color: rgba(242,246,252,1);
    border-radius: 10px;
}
@media all and (min-width :1250px){
    #main2{
        width: 65%;
        height: 400px;
        padding: 20px;
        box-sizing: border-box;
        /* box-shadow: 0px 0px 10px 3px rgb(167, 167, 167); */
        background-color: rgba(242,246,252,1);
        border-radius: 10px;
    }
    #main3{
        width: 33%;
        height: 400px;
        box-sizing: border-box;
        padding: 20px;
        /* box-shadow: 0px 0px 10px 3px rgb(167, 167, 167); */
        background-color: rgba(242,246,252,1);
        border-radius: 10px;
    }
}
@media all and (max-width :1249px){
    #main2{
        width: 100%;
        height: 400px;
        padding: 20px;
        box-sizing: border-box;
        /* box-shadow: 0px 0px 10px 3px rgb(167, 167, 167); */
        background-color: rgba(242,246,252,1);
        border-radius: 10px;
    }
    #main3{
        width: 100%;
        height: 400px;
        box-sizing: border-box;
        padding: 20px;
        /* box-shadow: 0px 0px 10px 3px rgb(167, 167, 167); */
        background-color: rgba(242,246,252,1);
        border-radius: 10px;
    }
}
</style>